<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i>人脸搜索</span>
        <el-row :gutter="15">
          <el-form ref="elForm1" :model="formData1" :rules="rules" size="medium" label-width="100px">
            <el-col :span="4">
              <el-form-item label="人脸图片1" prop="face">
                <el-upload
                  :class="{'hide': isShowFace3}"
                  list-type="picture-card"
                  action="#"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :limit=1
                  :auto-upload="false"
                  :show-file-list="true"
                  name="files"
                  :disabled="isShowFace3"
                  :on-change="handleSearchFaceChange"
                  :on-exceed="handleExceed"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="人脸集" prop="faceCollection">
                <el-input v-model="formData1.faceCollection" placeholder="请输入人脸集" show-word-limit
                          clearable
                          :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="人脸ID" prop="faceId">
                <el-input v-model="formData1.faceId" placeholder="请输入人脸ID" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="相似度" prop="similarity">
                <el-input v-model="formData1.similarity" placeholder="请输入相似度" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="前N条" prop="No">
                <el-input v-model="formData1.No" placeholder="请输入前N条" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="查询" prop="search">
                <el-button type="primary" icon="el-icon-search" @click="searchForm" size="medium"> 搜索</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-table :data="tableData"
                  style="width: 80%;margin-left: 50px;margin-top: 50px"
        >
          <el-table-column prop="faceId" label="人脸ID"></el-table-column>
          <el-table-column prop="imgId" label="图片拓展ID"></el-table-column>
          <el-table-column prop="similarity" label="相似度"></el-table-column>
          <el-table-column prop="faceCoordinate" label="人脸坐标"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane class="el-tab-max" label="人脸对比">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" class="form-face" label-width="100px">
          <div class="form-face-img">
            <el-form-item label="人脸图片1" prop="faceImg1">
              <el-upload
                :class="{'hide': isShowFace1}"
                list-type="picture-card"
                action="#"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit=1
                :auto-upload="false"
                :show-file-list="true"
                name="files"
                :disabled="isShowFace1"
                :on-change="handleChange"
                :on-exceed="handleExceed"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="人脸图片2" prop="faceImg2">
              <el-upload
                :class="{'hide': isShowFace2}"
                list-type="picture-card"
                action="#"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit=1
                :auto-upload="false"
                name="files"
                :show-file-list="true"
                :disabled="isShowFace2"
                :on-change="handleChangeFaceImg2"
                :on-exceed="handleExceed"
              >
                <i class="el-icon-plus"></i>
                <h3 slot="tip" class="el-upload__tip">只能上传 jpg / png 文件，且不超过 4 MB</h3>
              </el-upload>
            </el-form-item>
          </div>
          <div class="form-face-submit">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm"><i class="el-icon-search"></i> 对比</el-button>
            </el-form-item>
          </div>
        </el-form>

        <div class="compare-face-info">
          <el-row>
            <el-col :offset="1" :span="20"><h1>对比信息</h1></el-col>
          </el-row>
          <el-row>
            <el-col :offset="2" :span="6">
              <div>相似度</div>
            </el-col>
            <el-col :offset="2" :span="6">
              <div>{{ resp.similarity }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :offset="2" :span="6">
              <div>人脸图片1位置信息</div>
            </el-col>
            <el-col :offset="2" :span="6">
              <div>{{ resp.image1_face }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :offset="2" :span="6">
              <div>人脸图片2位置信息</div>
            </el-col>
            <el-col :offset="2" :span="6">
              <div>{{ resp.image2_face }}</div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>


  </div>

</template>

<script>
import { compare } from '@/api/system/database'
import Vue from 'vue'

export default {
  components: {},
  props: [],
  data() {
    return {
      tableData: [

      ],
      mockData :{
        faceId: '10096',
        imgId: '522258b2aeca41aabf695fd91cfd4850',
        similarity: '0.9866348342',
        faceCoordinate: '"width": 91, "top_left_y": 42, "top_left_x": 48, "height": 115'
      },
      formData1: {
        face: '',
        faceCollection: undefined,
        faceId: undefined,
        similarity: undefined,
        No: undefined
      },
      rules: {
        mobile: [{
          required: true,
          message: '请输入人脸集',
          trigger: 'blur'
        }, {
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        field101: [{
          required: true,
          message: '请输入人脸ID',
          trigger: 'blur'
        }],
        field102: [{
          required: true,
          message: '请输入相似度',
          trigger: 'blur'
        }],
        field103: [{
          required: true,
          message: '请输入前N条',
          trigger: 'blur'
        }]
      },
      isShowFace1: false,
      isShowFace2: false,
      isShowFace3: false,
      formData: {
        files: []
      },
      // 查询参数
      queryParams: {
        files: null
      },
      resp: {
        similarity: '',
        image1_face: '',
        image2_face: ''
      }
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handleChange(file, fileList) {
      if (fileList.length >= 1) {
        this.isShowFace1 = true
      }
      this.formData.files.push(file.raw)
    },
    handleChangeFaceImg2(file, fileList) {
      if (fileList.length >= 1) {
        this.isShowFace2 = true
      }
      this.formData.files.push(file.raw)
    },
    handleSearchFaceChange(file, fileList) {
      if (fileList.length >= 1) {
        this.isShowFace3 = true
      }
      this.formData1.face = file.raw
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    submitForm() {
      if (this.formData.files.length < 2) {
        this.$message.error('请上传两张人脸图片！ ')
        return
      }
      const form = new FormData()
      for (const item of this.formData.files) {
        form.append('files', item)
      }

      this.$refs['elForm'].validate(valid => {
        if (valid) {
          compare(form).then(response => {
            Vue.set(this.resp, 'similarity', response.data.similarity)
            Vue.set(this.resp, 'image1_face', response.data.image1_face.bounding_box)
            Vue.set(this.resp, 'image2_face', response.data.image2_face.bounding_box)
          })
        }
      })
    },
    searchForm() {
      console.log(this.formData1, 'formData1')
      if (this.formData1.face === '') {
        this.$message.error('请上传人脸图片！')
        return
      } else if (this.formData1.faceCollection === undefined) {
        this.$message.error('请输入人脸集！')
        return
      } else if (this.formData1.faceId === undefined) {
        this.$message.error('请输入人脸ID！')
        return
      } else if (this.formData1.similarity === undefined) {
        this.$message.error('请输入相似度！')
        return
      } else if (this.formData1.No === undefined) {
        this.$message.error('请输入前N条！')
        return
      }
      Vue.set(this.tableData, 0, this.mockData)
    this.$refs['elForm1'].validate(valid => {
      if (!valid) return
      // TODO 提交表单
    })
  }
}
}
</script>

<style scoped lang="scss">
.form-face {
  height: 400px;

  .form-face-img {
    display: flex;
    justify-content: start;
    align-items: start;

    .el-form-item {
      width: 15%;
    }

    margin-top: 50px;

    .compare-face-info {

    }

    .el-tab-max {
      height: 400px;
      width: 100%;
      border: 1px solid red;
    }
  }

  .asdhsa {
    height: 400px;
    width: 400px;
    border: 1px solid red;
  }
}

::v-deep.hide .el-upload--picture-card {
  display: none;
}
</style>
